<template>
	<view class="content">
		<view class="top-content"></view>
		<view class="img-content">
			<image src="@/static/logo.png" mode="widthFix"></image>
		</view>
		<view class="title-content text-bold text-xxl">
			<text>ZCEBOX</text>
		</view>
		<form @submit="login">
			<view class="cu-form-group round margin-lr-xl">
				<image class="form_icon" src="@/static/user.png" mode="widthFix"></image>
				<!-- <view class="form-title margin-lr">用户名</view> -->
				<input class="form-input margin-left" placeholder="请输入用户名" placeholder-class="form-input"
					name="userName"></input>
			</view>
			<view class="cu-form-group round margin-lr-xl text-df margin-top-lg">
				<image class="form_icon" src="@/static/pwd.png" mode="widthFix"></image>
				<!-- <view class="form-title margin-lr">密&emsp;码</view> -->
				<input class="form-input margin-left" placeholder="请输入密码" placeholder-class="form-input" name="passWord"
					type="password"></input>
			</view>
			<view class="margin-top-xxl flex justify-center">
				<button style="background-color: #0f669b;" class="cu-btn xl" form-type="submit">登&emsp;&emsp;录</button>
			</view>
		</form>

	</view>
</template>

<script>
	import {
		APIHOST
	} from '../../common/config';
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			this.getAllDict();
			// if (this.$cache.get("token")) {
			// 	uni.showLoading({
			// 		title: '正在自动登录...',
			// 		mask: false
			// 	});

			// 	if (this.$cache.get("roleId") == 5) {
			// 		setTimeout(() => {
			// 			uni.hideLoading()
			// 			uni.navigateTo({
			// 				url: '/pages/main_group_leader/main_group_leader'
			// 			});
			// 		}, 2000)
			// 	} else if (this.$cache.get("roleId") == 4) {
			// 		setTimeout(() => {
			// 			uni.hideLoading()
			// 			uni.navigateTo({
			// 				url: '/pages/workshop_director/main/main'
			// 			});
			// 		}, 2000)
			// 	} else if (this.$cache.get("roleId") == 6 || res.data.roleId == 3) {
			// 		setTimeout(() => {
			// 			uni.hideLoading()
			// 			uni.navigateTo({
			// 				url: '/pages/planner/main/main'
			// 			});
			// 		}, 2000)
			// 	} else if (this.$cache.get("roleId") == 7) {
			// 		setTimeout(() => {
			// 			uni.hideLoading()
			// 			uni.navigateTo({
			// 				url: '/pages/assemble_leader/main/main'
			// 			});
			// 		}, 2000)
			// 	} else if (this.$cache.get("roleId") == 8) {
			// 		setTimeout(() => {
			// 			uni.hideLoading()
			// 			uni.navigateTo({
			// 				url: '/pages/assemble_director/main/main'
			// 			});
			// 		}, 2000)
			// 	} else if (this.$cache.get("roleId") == 12) {
			// 		setTimeout(() => {
			// 			uni.hideLoading()
			// 			uni.navigateTo({
			// 				url: '/pages/warehouse_management/warehouse_management'
			// 			});
			// 		}, 2000)
			// 	}
			// }
		},
		methods: {
			login(e) {
				let form = e.detail.value;
				if (!form.userName) {
					uni.showToast({
						title: '用户名不能为空',
						icon: 'none',
						duration: 2000
					});
				} else if (!form.passWord) {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none',
						duration: 2000
					});
				} else {

					uni.showLoading({
						title: '正在登录...',
						mask: false
					})
					const deviceId = uni.getSystemInfoSync().deviceId
					console.log(deviceId)
					let url = this.$httpApi.phpLogin.login + "?userName=" + form.userName + "&passWord=" + form
						.passWord + "&deviceId=" + deviceId
					this.$Request.postPHP(url).then(res => {
						uni.hideLoading()
						if (res.code == 200) {
							this.$cache.put('phptoken', res.data.token)
						}
					})
					this.$Request.post(this.$httpApi.login.login, e.detail.value).then(res => {
						uni.hideLoading()
						if (res.code != 200) {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							});
						} else {
							this.$cache.put('token', res.data.token)
							this.$cache.put('userId', res.data.userId)
							this.$cache.put('groupId', res.data.groupId)
							this.$cache.put('roleId', res.data.roleId)

							console.log(res.data.groupId)
							uni.showToast({
								title: "登录成功",
								icon: 'none',
								duration: 2000
							});
							if (res.data.roleId == 5) {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/main_group_leader/main_group_leader'
									});
								}, 2000)
							} else if (res.data.roleId == 4) {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/workshop_director/main/main'
									});
								}, 2000)
							} else if (res.data.roleId == 6 || res.data.roleId == 3) {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/planner/main/main'
									});
								}, 2000)
							} else if (this.$cache.get("roleId") == 7) {
								setTimeout(() => {
									uni.hideLoading()
									uni.navigateTo({
										url: '/pages/assemble_leader/main/main'
									});
								}, 2000)
							} else if (this.$cache.get("roleId") == 8) {
								setTimeout(() => {
									uni.hideLoading()
									uni.navigateTo({
										url: '/pages/assemble_director/main/main'
									});
								}, 2000)
							} else if (this.$cache.get("roleId") == 12) {
								setTimeout(() => {
									uni.hideLoading()
									uni.navigateTo({
										url: '/pages/warehouse_management/warehouse_management'
									});
								}, 2000)
							}

						}
					})
				}
			},

			getAllDict() {
				this.$Request.get(this.$httpApi.login.getAllDict).then(res => {
					if (res.code == 200) {
						this.$cache.put('colour', res.data.colour)
						this.$cache.put('products', res.data.products)
						this.$cache.put('zzProducts', res.data.zzProducts)
						this.$cache.put('machineNumbers', res.data.machineNumbers)
						this.$cache.put('materials', res.data.materials)
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	image {
		width: 200rpx;
		height: 200rpx;
	}

	form {
		width: 100%;
	}

	button {
		width: 50%;
		font-size: 30rpx;
		background-color: #0f669b;
	}

	.form_icon {
		width: 35rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.top-content {
		height: 208rpx;
	}

	.title-content {
		margin-top: 0rpx;
		margin-bottom: 128rpx;
		font-weight: 900;
		font-size: 65rpx;
	}

	.input-content {
		height: 64rpx;
		width: 100%;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.cu-form-group {
		min-height: 64rpx;
		border-width: 2rpx; //设置线宽为2rpx
		border-style: groove; //设置边框风格为槽线边框
		border-color: rgba(0, 0, 0, 0.15);
	}

	.form-title {
		color: rgba(0, 0, 0, 0.35);
		size: 28rpx;
	}

	.form-input {
		color: rgba(0, 0, 0, 0.35);
		size: 28rpx;

	}

	.margin-top-xxl {
		margin-top: 128rpx;
	}

	.cu-btn {
		background-color: #0f669b;
		/* background: #0f669b; */
		color: #fff;
	}
</style>